<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Keep Account</title>
        <link rel="stylesheet" type="text/css" href="res/common.css" /> 
        <style>
            .one_input_layout { width: 320px; height: 25px; float: left;}
            .one_line_layout { width: 720px; height: 30px;}
            .input_line_element { 
                float: left;
                width: 128px; 
                height: 20px;
                margin-top: 8px;
                margin-bottom: 8px;
            }
            .triple_ele_input_line_element {
                float: left;
                height: 20px;
                margin-top: 8px;
                margin-bottom: 8px;
            }
            #commit_button { margin-top : 16px; margin-left : 16px; }
            #text_record {width: 520px; height: 280px;}
            #instalment_p {width: 90px; }
            #instalment_checkbox {width: 28px; }
            #period_count {width: 128px; }
        </style>
        <script type="text/javascript" src="res/common.js"></script>
    </head>
    <body>
        <div id="navi_bar">
        </div>
        <div id="data_show">
            <div class="one_line_layout">
                <div class="one_input_layout" >
                    <p class="input_line_element" >Type:</p>
                    <select class="input_line_element" id="record_type_select" onchange="onRecordTypeChange()">
                        <option value='payment'>Payment</option>
                        <option value='income'>Income</option>
                        <option value='transfer'>Transfer</option>
                    </select>
                </div>
                <div class="one_input_layout" >
                    <p class="input_line_element">Date:</p>
                    <textarea class="input_line_element" id="time_input" placeholder="YYYY-MM-DD"></textarea>
                    <!--input class="laydate-icon" onclick="laydate()"-->
                </div>
            </div>
            <div class="one_line_layout">
                <div class="one_input_layout" >
                    <p class="input_line_element" >Currency:</p>
                    <select class="input_line_element" id="currency_select" onchange="onCurrencySelectChange()">
                        <!-- <option class="currency_select_opt" value="0">Plase select</option> -->
                    </select>
                </div>
                <div class="one_input_layout" >
                    <p class="input_line_element" >Account:</p>
                    <select class="input_line_element" id="account_select">
                    </select>
                </div>
            </div>
            <div class="one_line_layout">
                <div class="one_input_layout" >
                    <p class="input_line_element" >Src Account:</p>
                    <select class="input_line_element" id="src_account_select" disabled="true">
                        <!-- <option class="src_account_select_opt" value="0">Plase select</option> -->
                    </select>
                </div>
                <div class="one_input_layout" >
                    <p class="input_line_element" >Dst Account:</p>
                    <select class="input_line_element" id="dst_account_select" disabled="true">
                            <!-- <option class="dst_account_select_opt" value="0">Plase select</option> -->
                    </select>
                </div>
            </div>
            <div class="one_line_layout">
                <div class="one_input_layout" >
                    <p class="input_line_element" >Cat1:</p>
                    <select class="input_line_element" id="cat1_select" onchange="onCat1SelectChange()">
                        <!-- <option class="cat1_select_opt" value="0">Plase select</option> -->
                    </select>
                </div>
                <div class="one_input_layout" >
                    <p class="input_line_element" >Cat2:</p>
                    <select class="input_line_element" id="cat2_select">
                        <!-- <option class="cat2_select_opt" value="0">Plase select</option> -->
                    </select>
                </div>
            </div>
            <div class="one_line_layout" >
                <div class="one_input_layout" >
                    <p class="input_line_element" >Amount/DnPay:</p>
                    <textarea class="input_line_element" id="amount_val"></textarea>
                </div>
                <div class="one_input_layout" >
                    <p class="input_line_element" >Description:</p>
                    <textarea class="input_line_element" id="description_val"></textarea>
                </div>
            </div>
            <div class="one_line_layout" >
                <div class="one_input_layout" >
                    <p class="triple_ele_input_line_element" id="instalment_p">Instalment:</p>
                    <input class="triple_ele_input_line_element" type="checkbox" id="instalment_checkbox" onchange="onInstalmentCheckboxChange();">
                    <textarea class="triple_ele_input_line_element" id="period_count" placeholder="period count"></textarea>
                </div>
                <div class="one_input_layout" >
                    <p class="input_line_element" >Period Payment:</p>
                    <textarea class="input_line_element" id="period_payment"></textarea>
                </div>
            </div>
            <div>
                <div class="one_input_layout" >
                    <p class="input_line_element" >User:</p>
                    <select class="input_line_element" id="user_select">
                        <option class="user_select_opt" value="null">Plase select</option>
                        <!-- <option class="user_select_opt" value="0">Plase select</option> -->
                    </select>
                </div>
                <button id="commit_button" onclick="onCommitClick()">Commit</button>
            </div>
            <div>
                <p>Records Text:</p>
                <textarea id="text_record" placeholder="&#10;--------------------------------&#10;| NOTICE: select user first!!! |&#10;--------------------------------&#10;&#10;Format:&#10;&#10;MM-DD or YYYY-MM-DD&#10;Price ShortName Description&#10;..."></textarea>
                <div>
                    <button id="text_commit_button" onclick="onTextCommitClick()">Commit</button>
                </div>
            </div>
        </div>
    </body>
    <script>
        var currency_list = [];
        var currency_account = {}; // {crc_id:{}}
        var income_cat = [];
        var payment_cat = [];
        var transfer_cat = [];
        var payment_cat1_cat2 = {};
        var g_record_type; var g_current_time; var g_currency_id;
        var g_account_id; var g_src_account_id; var g_dst_account_id;
        var g_cat1_id; var g_cat2_id; var g_amount; var g_description;

        function onCommitReturn200(result) {
            result = JSON.parse(result);
            var isSuccess = showServiceReturnValue(result);
            if(isSuccess == true) {
                document.getElementById('amount_val').value = '';
                document.getElementById('description_val').value = '';
            }
            document.getElementById('commit_button').disabled = false;
        }

        function onCurrencySelectChange() {
            var crc_id = document.getElementById('currency_select').value;
            resetAccountListByCurrencyId(crc_id, currency_account);
        }

        function onCommitClick() {
            g_record_type = encodeURIComponent(document.getElementById('record_type_select').value);
            g_current_time = encodeURIComponent(document.getElementById('time_input').value);
            g_currency_id = encodeURIComponent(document.getElementById('currency_select').value);
            g_account_id = encodeURIComponent(document.getElementById('account_select').value);
            g_src_account_id = encodeURIComponent(document.getElementById('src_account_select').value);
            g_dst_account_id = encodeURIComponent(document.getElementById('dst_account_select').value);
            g_cat1_id = encodeURIComponent(document.getElementById('cat1_select').value);
            g_cat2_id = encodeURIComponent(document.getElementById('cat2_select').value);
            g_amount = encodeURIComponent(document.getElementById('amount_val').value);
            g_description = encodeURIComponent(document.getElementById('description_val').value);
            g_user_id = encodeURIComponent(document.getElementById('user_select').value);
            g_is_instalment = encodeURIComponent(document.getElementById('instalment_checkbox').check == true ? 1 : 0);
            g_period_count = encodeURIComponent(document.getElementById('period_count').value);
            g_period_payment = encodeURIComponent(document.getElementById('period_payment').value);

            if(g_user_id == 'null') {
                alert("Please select user.");
                document.getElementById('commit_button').disabled = false;
                return;
            }
            if(isLegalDateString(g_current_time) == false) {
                alert("Illegal Date");
                document.getElementById('commit_button').disabled = false;
                return;
            }
            uri = '';
            if(g_record_type == 'income') {
                uri = '/service/record/addIncome?user_id=' + g_user_id
                    + '&currency_id=' + g_currency_id + '&account_id=' + g_account_id 
                    + '&current_time=' + g_current_time + '&amount=' + g_amount
                    + '&cat1_id=' + g_cat1_id + '&description=' + g_description;
            }
            else if(g_record_type == 'payment') {
                uri = '/service/record/addPayment?user_id=' + g_user_id
                    + '&currency_id=' + g_currency_id + '&account_id=' + g_account_id 
                    + '&current_time=' + g_current_time + '&amount=' + g_amount
                    + '&cat1_id=' + g_cat1_id + '&description=' + g_description
                    + '&cat2_id=' + g_cat2_id + '&is_instalment=' + g_is_instalment
                    + '&period_count=' + g_period_count + '&period_payment' + g_period_payment;
            }
            else if(g_record_type == 'transfer') {
                uri = '/service/record/addTransfer?user_id=' + g_user_id
                    + '&currency_id=' + g_currency_id + '&src_account_id=' + g_src_account_id
                    + '&dst_account_id=' + g_dst_account_id
                    + '&current_time=' + g_current_time + '&amount=' + g_amount
                    + '&cat1_id=' + g_cat1_id + '&description=' + g_description;
            }
            document.getElementById('commit_button').disabled = true;
            getUrlAsyn(uri, onCommitReturn200);
        }

        function onTextCommitClick() {
            document.getElementById("text_commit_button").disabled = true;
            g_user_id = encodeURIComponent(document.getElementById('user_select').value);
            if(g_user_id == 'null') {
                alert("Please select user.");
                document.getElementById("text_commit_button").disabled = false;
                return;
            }
            g_currency_id = encodeURIComponent(document.getElementById('currency_select').value);
            g_account_id = encodeURIComponent(document.getElementById('account_select').value);
            text = encodeURIComponent(document.getElementById('text_record').value)
            uri = '/service/record/addPaymentRecordsByText?user_id=' + g_user_id
                + '&text=' + text
                + '&currency_id=' + g_currency_id + '&account_id=' + g_account_id
            getUrlAsyn(uri, onTextCommitSuccess, 5000);
        }

        function onTextCommitSuccess(result) {
            result = JSON.parse(result);
            var isSuccess = showServiceReturnValue(result);
            if(isSuccess == true) {
                document.getElementById('text_record').value = '';
            }
            document.getElementById("text_commit_button").disabled = false;
        }

        function resetCat1Select(cat1_list) {
            // 先刪除select下的所有選項
            cat1_select = document.getElementById('cat1_select');
            clearSubElement(cat1_select, 'cat1_select_opt');
            // 再向select添加新的選項
            cat1_list.forEach(function(ele) {
                appendSelectorOption(cat1_select, ele.cat1_id, ele.nameme, 'cat1_select_opt');
            });
        }

        function setPaymentCat1And2() {
            resetCat1Select(payment_cat);
            cat2_select = document.getElementById('cat2_select');
            clearSubElement(cat2_select, 'cat2_select_opt');
            selected_cat1_id = document.getElementById('cat1_select').selectedOptions.item(0).value;
            cat2_list = payment_cat1_cat2[selected_cat1_id];
            cat2_list.forEach(function(ele) {
                appendSelectorOption(cat2_select, ele.cat2_id, ele.nameme, 'cat2_select_opt');
            })
        }

        function onRecordTypeChange() {
            var select = document.getElementById('record_type_select');
            switch(select.value) {
                case 'income':
                    cat2_select = document.getElementById('cat2_select')
                    cat2_select.disabled = true;
                    document.getElementById('account_select').disabled = false;
                    document.getElementById('src_account_select').disabled = true;
                    document.getElementById('dst_account_select').disabled = true;
                    document.getElementById('cat2_select').selectedIndex = 0;
                    resetCat1Select(income_cat);
                    clearSubElement(cat2_select, 'cat2_select_opt');
                    break;
                case 'payment':
                    document.getElementById('cat2_select').disabled = false;
                    document.getElementById('account_select').disabled = false;
                    document.getElementById('src_account_select').disabled = true;
                    document.getElementById('dst_account_select').disabled = true;
                    setPaymentCat1And2();
                    break;
                case 'transfer':
                    cat2_select = document.getElementById('cat2_select')
                    cat2_select.disabled = true;
                    document.getElementById('account_select').disabled = true;
                    document.getElementById('src_account_select').disabled = false;
                    document.getElementById('dst_account_select').disabled = false;
                    document.getElementById('cat2_select').selectedIndex = 0;
                    resetCat1Select(transfer_cat);
                    clearSubElement(cat2_select, 'cat2_select_opt');
                    break;
                default: break;
            }
        } 

        function onCat1SelectChange() {
            // 只有在填寫payment的時候才處理
            if(document.getElementById('record_type_select').value != 'payment') {
                return;
            }
            cat2_select = document.getElementById('cat2_select');
            clearSubElement(cat2_select, 'cat2_select_opt');
            selected_cat1_id = document.getElementById('cat1_select').value;
            cat2_list = payment_cat1_cat2[selected_cat1_id];
            cat2_list.forEach(function(cat2_item) {
               appendSelectorOption(cat2_select, cat2_item.cat2_id, cat2_item.nameme, 'cat2_select_opt') ;
            });
        }

        function onUIContentReceived(result) {
            result = JSON.parse(result);
            
            // 一、处理account相关的内容
            var opt = {};
            currency_account = result.data.account.data;
            // 生成币种菜单
            for(var crc_id in currency_account) {
                currency_info = currency_account[crc_id]
                opt = document.createElement('option');
                opt.value = currency_info.crc_id;
                opt.text = currency_info.nameme;
                document.getElementById('currency_select').appendChild(opt);
            }
            // 用第一个crc_id生成账户菜单
            resetAccountListByCurrencyId(Object.keys(currency_account)[0], currency_account);
            
            // 二、处理三种cat
            income_cat = result.data.income_cat.data;
            transfer_cat = result.data.transfer_cat.data;
            payment_cat = result.data.payment_cat.data;  // 全局变量
            payment_cat.forEach(function(item) {
                cat1_id = item.cat1_id;
                payment_cat1_cat2[cat1_id] = item.cat2_list;
            });
            setPaymentCat1And2();
            
            // 三、处理users
            user_select = document.getElementById('user_select')
            result.data.users.data.forEach(function(item) {
                appendSelectorOption(user_select, item.user_id, item.nameme, 'user_select_opt');
            });
            idx = localStorage.getItem('user_select_idx')
            if(idx != undefined) {
                idx = Number(idx);
                document.getElementById('user_select').selectedIndex = idx;
            }
            
            // 处理分期付款
            onInstalmentCheckboxChange();
        }

        function onInstalmentCheckboxChange() {
            var checkbox = document.getElementById('instalment_checkbox')
            if(checkbox.checked == false) {
                document.getElementById('period_count').disabled = true;
                document.getElementById('period_payment').disabled = true;
            }
            else {
                document.getElementById('period_count').disabled = false;
                document.getElementById('period_payment').disabled = false;
            }
        }

        genNavBar('add_record');
        getUrlAsyn('/service/ui/addRecord', onUIContentReceived);
        document.getElementById('time_input').innerHTML = getCurrentDateTimeString(0, true);
        
    </script>
</html>
